import React, {Component} from 'react';
import {withStore} from '../store/storeUtils';
import IconDevice from '../img/icon-devices.png';
import IconScan from '../img/icon-scan.png';
import IconUser from '../img/icon-user.png';
import './AppTabBar.less';
import {withRouter} from 'react-router-dom';
import WxApi from '../wx/WxApi';

class AppTabBar extends Component {
    switchTab = path => {
        this.props.history.push({pathname: path});
    };
    scanSn = () => {
        const _this = this;
        WxApi.api.scanQrCode({
            desc: 'scanQRCode desc',
            needResult: 1,
            scanType: ["qrCode", "barCode"],
            success: function (res) {
                const result = res.resultStr;
                const path = `/scan/${result}`;
                _this.props.history.push({pathname: path});
            }
        });
    };

    render() {
        const {storeState} = this.props;
        if (!storeState.ui.showTab) {
            return null;
        }
        return (
            <div className="app-tab-bar">
                <div className="mask"/>
                <div className="menus">
                    <div className="item" onClick={() => this.switchTab('/')}>
                        <img src={IconDevice} alt="devices"/>
                        <p className="title">设备</p>
                    </div>
                    <div className="item-large" onClick={this.scanSn}>
                        <img src={IconScan} alt="scan"/>
                        <p className="title">扫描</p>
                    </div>
                    <div className="item" onClick={() => this.switchTab('/account')}>
                        <img src={IconUser} alt="user"/>
                        <p className="title">我的</p>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(withStore(AppTabBar));